// import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Button from '@kuiper-components/button';
import Dialog from '@kuiper-components/dialog';
import s from './showTC.module.css';
import { WARNING_SECURITYEVENT_MAP } from '../../../../../../../../common/constants';
import { datetime } from '../../../../../../../../common/formatter';

function ShowTC({
	className,
	children,
	type,
	info,
	isLatestTask,
	host,
	triggerType,
	taskSettings,
	jobId,
	taskType,
	note,
}) {
	const typeArr = Object.keys(info).map(e => {
		return e;
	});
	const [visible, setVisible] = React.useState(false);
	const codeHit = () => {
		const style = { color: '#fff', background: '#e70c0c' };
		const dom = [];
		return (
			<div className={s.codeType}>
				{['keyword'].map(type => {
					info[type][0].extra_risk_evidences.forEach(code => {
						const str = code.split(info[type][0].risk_rule);
						dom.push(
							<p>
								{str.map((e, i) => {
									if (i < str.length - 1) {
										return (
											<>
												<span>{e}</span>
												<span style={style}>{info[type][0].risk_rule}</span>
											</>
										);
									} else {
										return <span>{e}......</span>;
									}
								})}
							</p>
						);
					});
					if (dom[0]) {
						return (
							<div className={s.content}>
								<span>{WARNING_SECURITYEVENT_MAP[type]}</span>
								<div className={s.codeBox}>
									{dom.map(e => {
										return e;
									})}
								</div>
							</div>
						);
					} else {
						return (
							<div className={s.content}>
								<span>{WARNING_SECURITYEVENT_MAP[type]}</span>
								<div>暂无数据</div>
							</div>
						);
					}
				})}
			</div>
		);
	};
	const foreign_links = () => {
		return (
			<>
				<div>
					<span>风险外链：</span>
					<span>{info[typeArr[0]][0].risk_url}</span>
				</div>
				<div>
					<span>抓取时间：</span>
					<span>{datetime(info[typeArr[0]][0].found_at)}</span>
				</div>

				<div>
					<span>外链源码：</span>
				</div>
				{codeHit()}
			</>
		);
	};
	const broken = () => {
		return (
			<>
				{' '}
				<div>
					<span>坏链外链：</span>
					<span>{info}</span>
				</div>
				<div>
					<span>抓取时间：</span>
					<span>xxxxxx</span>
				</div>
				<div className={s.codeBox}>图片</div>
			</>
		);
	};
	return (
		<>
			<Button
				link
				primary
				className={className}
				onClick={() => setVisible(true)}
			>
				{children}
			</Button>
			<Dialog
				title={children}
				visible={visible}
				className={s.modal}
				onClose={() => setVisible(false)}
			>
				<div className={s.actions}>
					{type === 'broken_links' ? broken() : foreign_links()}
					<div className={s.btnBox}>
						<Button
							primary
							className={s.actionBtn}
							onClick={() => setVisible(false)}
						>
							取消
						</Button>
					</div>
				</div>
			</Dialog>
		</>
	);
}

ShowTC.propTypes = {
	type: PropTypes.string,
	className: PropTypes.string,
	children: PropTypes.node,
	host: PropTypes.string.isRequired,
	triggerType: PropTypes.string.isRequired,
	taskSettings: PropTypes.shape({
		collect: PropTypes.object.isRequired,
		interval: PropTypes.number,
		alert: PropTypes.object,
		enable: PropTypes.bool,
	}),
	jobId: PropTypes.string,
	taskType: PropTypes.string,
	isLatestTask: PropTypes.bool,
	note: PropTypes.string,
	info: PropTypes.any,
};
ShowTC.defaultProps = {
	className: '',
	note: '',
};

export default ShowTC;
